<template>
  <div class="my-order">
    <!-- 标题栏 -->
    <van-nav-bar fixed title="我的订单" left-arrow @click-left="onClickLeft">
      <template #right>
        <van-icon name="ellipsis" size="18" />
      </template>
    </van-nav-bar>

    <!-- 标签栏 -->
    <van-tabs  sticky offset-top="1rem" v-model:active="active">
      <!-- @click-tab="onClickTab" -->
      <van-tab :title="item.title" v-for="item in tabList" :key="item.title" >
        <div class="order-list">
          <!-- 订单列表 -->
          <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">

            
              <van-cell v-for="item in orderList" :key="item">
                <template #title>
                  <router-link :to="{path:'/order-detail',query:{id:item.orderNo}}">
                    <div class="order-part">
                      <div class="text">
                        <p class="create-time">订单时间：{{ item.createTime }}</p>
                        <p class="order-status">{{ item.orderStatusString }}</p>
                      </div>
                      <van-card v-for="ele in item.newBeeMallOrderItemVOS" :key="ele.goodsId" desc="全场包邮" :num="ele.goodsCount"
                        :price="ele.sellingPrice" :title="ele.goodsName" :thumb="ele.goodsCoverImg" />
                    </div>
                  </router-link>
                  
              
                </template>
              </van-cell>
           
          

          </van-list>
        </div>


      </van-tab>
    </van-tabs>

  </div>



</template>

<script setup>
import { ref, reactive, onMounted, watch} from "vue"
import { useRoute, useRouter } from "vue-router";
import { getOrderData } from '@/api/index.js'
let route = useRoute();
let router = useRouter();


let tabList = [
  { title: "全部",status:"" },
  { title: "待付款", status:0},
  { title: "已付款", status:1},
  { title: "待发货", status:2},
  { title: "已发货", status:3},
  { title: "交易完成", status:4},
]

let orderList = reactive([]);//所有订单列表
let pageNumber = 1; //当前页码
let status = ''//订单的状态

let active = ref(0);//tab选项绑定



// onMounted(() => {
//   getOrderData(pageNumber++,status).then(res => {
//     let { resultCode, data } = res;
//     if (resultCode == 200) {
//       // console.log(data);
//       orderList.length = 0;
//       orderList.push(...data.list)
//     }
//   })
// })

// // 点击标签切换事件
// let onClickTab = (obj) => {
//   console.log(obj);
//   if (obj.title=='全部') {
//     getOrderData(currentPage++).then(res => {
//       let { resultCode, data } = res;
//       if (resultCode == 200) {
//         // console.log(data);
//         orderList.length = 0;
//         orderList.push(...data.list)
//       }
//     })
//   } else {
//     let array = orderList.filter(item => {
//       return item.orderStatus == obj.status
//     })
//     orderList.splice(0, orderList.length)
//     orderList.push(...array)
//   }
  
  
// }





const loading = ref(false);
const finished = ref(false);

const onLoad = () => {
  getOrderData(pageNumber++, status).then(res => {
    let { resultCode, data } = res;
    if (resultCode == 200) {
      if (data.list.length == 0) {
        // 当后端订单列表数据为空时
        // 结束加载
        finished.value = true;
      }

      
      let array = orderList.concat(data.list)
      orderList.push(...array)
     

      // 加载状态结束
      loading.value = false;

     
    }
  })

}

// 监听active变化
watch(active, (newVal, oldVal) => {
  status = tabList[newVal].status;
  pageNumber = 1;
  orderList.splice(0, orderList.length);
  finished.value = false;
  onLoad()
})


// 点击顶部栏返回
let onClickLeft = () => {
  router.back()
}
</script>

<style scoped lang="less">
.my-order {
  .order-list {
    margin-top: 1rem;

    .order-part {
      color: black;
      .text {
        display: flex;
        justify-content: space-between;

        .create-time {
          font-size: .3rem;
        }

        .order-status {
          font-size: .3rem;
        }
      }

    }
  }

}
</style>